<script setup lang="jsx">
import { computed, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  inspectionMap,
  inspectionAudio,
} from "@/api/inspection/resource-manage.js";
import useCRUD from "@/composables/useCRUD.js";
import CreateMapDialog from "./CreateMapDialog.vue";
import CreateAudioDialog from "./CreateAudioDialog.vue";
import MyFormDialog from "@/components/MyFormDialog.vue";
import MyTable from "@/components/MyTable.vue";
import MainContainer from "@/components/MainContainer.vue";

// 地图列表
const mapColumns = [
  { label: "编号", prop: "id", width: 120 },
  { label: "地图名称", prop: "name" },
  {
    label: "地图文件",
    prop: "url",
    customRender(row) {
      return <el-image class=" w-full h-20" fit="cover" src={row.url} />;
    },
  },
  { label: "创建时间", prop: "createTime", width: 200 },
  {
    label: "操作",
    prop: "action",
    width: 200,
    customRender(row) {
      return (
        <div>
          <el-button
            text
            bg
            type="primary"
            onClick={() => {
              openUpdateMapOrAudioDialog(row);
            }}
          >
            编辑
          </el-button>
          <el-button
            text
            bg
            type="danger"
            onClick={() => {
              deleteMapOrAudio(row.id);
            }}
          >
            删除
          </el-button>
        </div>
      );
    },
  },
];

// 音频列表
const audioColumns = [
  { label: "编号", prop: "id", width: 120 },
  { label: "音频名称", prop: "name" },
  {
    label: "音频文件",
    prop: "url",
    customRender(row) {
      return <audio class="h-9 w-full" src={row.url} controls />;
    },
  },
  { label: "创建时间", prop: "createTime", width: 200 },
  {
    label: "操作",
    prop: "action",
    width: 200,
    customRender(row) {
      return (
        <div>
          <el-button
            text
            bg
            type="primary"
            onClick={() => {
              openUpdateMapOrAudioDialog(row);
            }}
          >
            编辑
          </el-button>
          <el-button
            text
            bg
            type="danger"
            onClick={() => {
              deleteMapOrAudio(row.id);
            }}
          >
            删除
          </el-button>
        </div>
      );
    },
  },
];

// 当前选中类型
const activeType = ref("map");
const columns = computed(() => {
  return activeType.value === "map" ? mapColumns : audioColumns;
});
function switchType(type) {
  if (type === "map") {
    crudOptions.queryApi = inspectionMap.read;
    handleQuery();
  } else {
    crudOptions.queryApi = inspectionAudio.read;
    handleQuery();
  }
}

// curd配置
const crudOptions = {
  queryApi: inspectionMap.read,
  updateApi: inspectionMap.update,
  deleteApi: inspectionMap.delete,
  newParams: {},
};
const {
  params,
  list,
  loading,
  total,
  dialogVisible,
  formData,
  handleQuery,
  handleDelete,
  handleConfirm,
} = useCRUD(crudOptions);

// 创建地图/音频弹窗
const createMapDialogVisible = ref(false);
const createAudioDialogVisible = ref(false);
function openCreateMapOrAudioDialog(type) {
  if (type === "map") {
    createMapDialogVisible.value = true;
  } else {
    createAudioDialogVisible.value = true;
  }
}

// 获取地图/音频
handleQuery();

// 修改地图/音频
const formOptions = [
  {
    prop: "name",
    label: "地图名称",
    rules: { required: true, message: "该选项不能为空", trigger: "blur" },
    customRender() {
      return <el-input />;
    },
  },
];
function openUpdateMapOrAudioDialog(row) {
  if (activeType.value === "map") {
    crudOptions.updateApi = inspectionMap.update;
    formOptions[0].label = "地图名称";
  } else {
    crudOptions.updateApi = inspectionAudio.update;
    formOptions[0].label = "音频名称";
  }
  formData.value = Object.assign({}, row);
  dialogVisible.value = true;
}

// 删除地图/音频
async function deleteMapOrAudio(id) {
  await ElMessageBox.confirm("确认继续操作吗", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
  });
  if (activeType.value === "map") {
    crudOptions.deleteApi = inspectionMap.delete;
  } else {
    crudOptions.deleteApi = inspectionAudio.delete;
  }
  const { message } = await handleDelete(id);
  ElMessage({ type: "success", message });
}
</script>

<template>
  <MainContainer class="p-5">
    <el-switch
      v-model="activeType"
      size="large"
      active-text="安保音频"
      inactive-text="安保地图"
      active-value="audio"
      inactive-value="map"
      @change="switchType(activeType)"
    />

    <el-button
      type="primary"
      class="ml-4"
      @click="openCreateMapOrAudioDialog(activeType)"
    >
      新增
    </el-button>

    <MyTable
      v-loading="loading"
      class="my-4"
      :data="list"
      :columns="columns"
    ></MyTable>

    <el-pagination
      v-model:currentPage="params.page"
      v-model:page-size="params.limit"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="justify-end"
      @size-change="handleQuery"
      @current-change="handleQuery"
    />

    <CreateMapDialog
      v-model:visible="createMapDialogVisible"
      @handle-query="handleQuery"
    ></CreateMapDialog>

    <CreateAudioDialog
      v-model:visible="createAudioDialogVisible"
      @handle-query="handleQuery"
    ></CreateAudioDialog>

    <MyFormDialog
      v-model:visible="dialogVisible"
      v-model:formData="formData"
      title="编辑"
      :options="formOptions"
      :loading="loading"
      @confirm="handleConfirm"
    ></MyFormDialog>
  </MainContainer>
</template>
